﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin.master" AutoEventWireup="true"
    CodeFile="Mapping.aspx.cs" ValidateRequest="false" Inherits="Admin_Mapping" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" href="/Contents/imgmap.css" type="text/css">
    <link href="/Contents/file-upload/fileuploader.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        fieldset legend
        {
            padding-left: 15px;
        }
        
        li
        {
            color: Black;
        }
        .adminHeader
        {
            height: 0px !important;
            width: 0px !important;
        }
    </style>
    <script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: "textarea",
            plugins: [
                "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
        ],

            toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
            toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
            toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

            menubar: false,
            toolbar_items_size: 'small',

            style_formats: [
                { title: 'Bold text', inline: 'b' },
                { title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
                { title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
                { title: 'Example 1', inline: 'span', classes: 'example1' },
                { title: 'Example 2', inline: 'span', classes: 'example2' },
                { title: 'Table styles' },
                { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
        ],

            templates: [
                { title: 'Test template 1', content: 'Test 1' },
                { title: 'Test template 2', content: 'Test 2' }
        ]
        });

        var objTextBox;
        $(document).ready(function () {
            $("#btnFile").click(function () {
                $(objTextBox).val(tinymce.get('txtrich').getContent());
                jQuery("#OldFiles").html("");
                var objAjax = jQuery.ajax({
                    type: "GET",
                    url: '/Handlers/FileUpload1.ashx',
                    data: { date: $('#txtDate').val(), title: $("#txtTitle").val(), comText: tinymce.get('txtrich').getContent(), tag: $("#txtMetaTags").val() },
                    dataType: "application/json",
                    async: true,
                    error: function (jqXHR, textStatus, errorThrown) {
                        CallFileInformationMenu();
                    },
                    success: function (msg) {
                        CallFileInformationMenu();

                    }
                });

            });


        });

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="dialog">
        Page Title :
        <asp:TextBox runat="server" ID="txtTitle" ClientIDMode="Static" />
        Meta Tags :
        <asp:TextBox runat="server" ID="txtMetaTags" ClientIDMode="Static" />
        <textarea cols="10" id="txtrich"></textarea>
        <div style="">
            <div id="file-uploader">
                <noscript>
                    <p>
                        Please enable JavaScript to use file uploader.</p>
                    <!-- or put a simple form for upload here -->
                </noscript>
            </div>
        </div>
        Uploaded files:
        <div class="actions uploaded-files-response-container">
            <ul id="uploaded-files-response">
            </ul>
        </div>
    </div>
    <fieldset>
        <button type="button" id="btnFile" class="btn large primary span2">
            Create New Page</button>
        <button type="button" id="btnRefresh" class="btn large primary span2">
            Get old files</button>
        Old Pages Files:
        <select id="PageNumberSelected">
            <option value="1-20">1-20</option>
        </select>
        <input type="text" id='txtDate' name="txtDate" value="" runat="server" clientidmode="Static" />
        <%--<input type="button" id="btnLoadImages" value="Load Old Images" />--%>
        <ul class="actions" id="OldFiles">
        </ul>
        <div id="dvTooltip" style="display: none; position: relative; z-index: 200px; background-color: #fff;
            width: 200px; height: 200px;" onmousemove="showTooltip(event, 'dvTooltip');">
            <img src="" alt="" style="" />
        </div>
    </fieldset>
    <fieldset>
        <div>
            <div class="source_desc">
            </div>
            <div class="source_url">
                <%--Menu:
                <asp:DropDownList ID="ddlMenu" runat="server" onchange="javascript:testingFunct(); return false;">
                </asp:DropDownList>--%>
                NewsWeek Images:
                <asp:DropDownList ID="source_url3" CssClass="span7" runat="server" onchange="javascript:test(this); return false;">
                </asp:DropDownList>
            </div>
            <br />
        </div>
    </fieldset>
    <fieldset>
        <%--<legend><a onclick="toggleFieldset(this.parentNode.parentNode)">Image map areas</a>
        </legend>--%>
        <div>
            <div id="button_container">
                <!-- buttons come here -->
                <img src="/Images/Imagmap/add.gif" onclick="myimgmap.addNewArea()" alt="Add new area"
                    title="Add new area" />
                <img src="/Images/Imagmap/delete.gif" onclick="myimgmap.removeArea(myimgmap.currentid)"
                    alt="Delete selected area" title="Delete selected area" />
                <img src="/Images/Imagmap/zoom.gif" id="i_preview" onclick="myimgmap.togglePreview();"
                    alt="Preview image map" title="Preview image map" />
                <%--<img src="/Images/Imagmap/html.gif" onclick="gui_htmlShow()" alt="Get image map HTML"
                    title="Get image map HTML" />--%>
                <%--<label for="dd_zoom" style="width:70px">
                    Zoom: </label>--%>
                <select onchange="gui_zoom(this)" id="dd_zoom" style="width: 100px">
                    <option value='0.25'>25%</option>
                    <option value='0.5'>50%</option>
                    <option value='1' selected="1">100%</option>
                    <option value='2'>200%</option>
                    <option value='3'>300%</option>
                </select>
                <%--<label for="dd_output" style="width:70px">
                    Output:</label>--%>
                <select id="dd_output" onchange="return gui_outputChanged(this)">
                    <option value='imagemap' selected="selected">Standard imagemap</option>
                    <option value='css'>CSS imagemap</option>
                    <option value='wiki'>Wiki imagemap</option>
                </select>
                <div style="display: none;">
                    <a class="toggler toggler_off" onclick="gui_toggleMore();return false;">More actions</a>
                    <div id="more_actions" style="display: none; position: absolute;">
                        <div>
                            <a href="" onclick="toggleBoundingBox(this); return false;">&nbsp; bounding box</a>
                        </div>
                        <div>
                            <a href="" onclick="return false">&nbsp; background color </a>
                            <input onchange="gui_colorChanged(this)" id="color1" style="display: none;" value="#ffffff">
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; margin: 0 5px" id="label_dropdown">
                <select onchange="changelabeling(this)">
                    <option value=''>No labeling</option>
                    <option value='%n' selected='1'>Label with numbers</option>
                    <option value='%a'>Label with alt text</option>
                    <option value='%h'>Label with href</option>
                    <option value='%c'>Label with coords</option>
                </select>
            </div>
        </div>
        <div id="form_container" style="clear: both;">
            <!-- form elements come here -->
        </div>
    </fieldset>
    <fieldset>
        <%--<legend><a onclick="toggleFieldset(this.parentNode.parentNode)">Image</a> </legend>--%>
        <div id="pic_container_container">
            <div id="pic_container">
            </div>
        </div>
    </fieldset>
    <%--    <fieldset>
        <legend><a onclick="toggleFieldset(this.parentNode.parentNode)">Status</a> </legend>
        <div id="status_container">
        </div>
    </fieldset>--%>
    <fieldset id="fieldset_html" class="fieldset_off" style="display: none;">
        <legend>Code<%--<a onclick="toggleFieldset(this.parentNode.parentNode)">Code</a>--%>
        </legend>
        <div>
            <div id="output_help">
            </div>
            <textarea id="html_container" runat="server"></textarea>
        </div>
    </fieldset>
    <div class="actions">
        <button type="button" id="submit_button" class="btn large primary span2" data-controls-modal="upload-image-modal"
            data-backdrop="static">
            Save
        </button>
        &nbsp; <a href="ToDayList.aspx" class="btn large ">Cancel</a>
    </div>
    <div id="upload-image-modal" class="modal hide fade" style="display: none;">
        <div class="modal-header">
            <a href="#" class="close">×</a>
            <h3>
                Saving...</h3>
        </div>
        <div class="modal-body">
            <img id="ajax-loader" src="/images/ajax-loader.gif" />
        </div>
        <%--<div class="modal-footer">
            <a href="#" class="btn primary">Primary</a>
            <a href="#" class="btn secondary">Secondary</a>
        </div>--%>
    </div>
    <script type="text/javascript" src="/Contents/file-upload/fileuploader.js"></script>
    <script type="text/javascript" src="/Contents/bootstrap-modal.js"></script>
    <script type="text/javascript" src="/Contents/imgmap.js"></script>
    <script type="text/javascript" src="/Contents/json.js"></script>
    <script type="text/javascript" src="/Contents/jquery.colorPicker.js"></script>
    <script type="text/javascript" src="/Contents/default_interface.js"></script>
    <asp:Literal runat="server" ID="SerializedObject"></asp:Literal>
    <script src="/Contents/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="/Contents/MappingJS.js" type="text/javascript"></script>
</asp:Content>
